<template>
  <div class="container">
    <div class="item">
      <div class="time" ref="timeChart"></div>
    </div>
    <div class="item">
      <div class="car" ref="carChart"></div>
    </div>
    <div class="item">
      <div class="earth" ref="earthChart"></div>
    </div>
    <div class="item">
      <div class="kline" ref="klineChart"></div>
    </div>
  </div>
</template>
  
  <script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import "echarts-gl";
import { OptionFun as timeOption } from "./ts/otherTime";
import { OptionFun as carOption } from "./ts/otherCar";
import { OptionFun as earthOption } from "./ts/otherEarth";
import { OptionFun as klinehOption } from "./ts/otherKLine";
const timeChart = ref<HTMLDivElement | null>(null);
const carChart = ref<HTMLDivElement | null>(null);
const earthChart = ref<HTMLDivElement | null>(null);
const klineChart = ref<HTMLDivElement | null>(null);
let time: any, car: any, earth: any, kline: any;

const timer = ref();

function initTime() {
  if (time) {
    time.clear();
  }
  time = echarts.init(timeChart.value);

  timer.value = setInterval(function () {
    var date = new Date();
    var second = date.getSeconds();
    var minute = date.getMinutes() + second / 60;
    var hour = (date.getHours() % 12) + minute / 60;
    let option: any = timeOption();
    option.animationDurationUpdate = 300;
    time.setOption({
      series: [
        {
          name: "hour",
          animation: hour !== 0,
          data: [{ value: hour }],
        },
        {
          name: "minute",
          animation: minute !== 0,
          data: [{ value: minute }],
        },
        {
          animation: second !== 0,
          name: "second",
          data: [{ value: second }],
        },
      ],
    });
  }, 1000);
  time.setOption(timeOption());
}
function initCar() {
  if (car) {
    car.clear();
  }
  car = echarts.init(carChart.value);
  car.setOption(carOption());
}
function initEarth() {
  if (earth) {
    earth.clear();
  }
  earth = echarts.init(earthChart.value);
  earth.setOption(earthOption());
}
function initKLine() {
  if (kline) {
    kline.clear();
  }
  kline = echarts.init(klineChart.value);
  kline.setOption(klinehOption());
}
function init() {
  initTime();
  initCar();
  initEarth();
  initKLine();
}
onMounted(() => {
  init();
});
onUnmounted(() => {
  clearInterval(timer.value);
});
</script>
  
  <style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  .item {
    width: 45%;
    height: 45%;
    .time,
    .car,
    .earth,
    .kline {
      width: 100%;
      height: 100%;
    }
  }
}
</style>